<template>
  <a-col class="passgoods">
    <a-row :gutter="24">
      <a-col :lg="24" :md="24" :sm="24">
        <a-card class="card" title="通过商品列表" :bordered="false">
          <div class="groupbox">
            <div class="leftgroup">
              <div class="scrollBox">
                <!-- <a-radio-group @change="groupChange" value="a" v-model="value" buttonStyle="solid">
                    <a-radio-button ref="radio" defaultChecked class="radio" value="0">
                      全部小组
                    </a-radio-button>
                    <a-radio-button class="radio" v-for="item in groupList" :key="item.groupId" :value="item.groupId">
                      {{ item.groupName }}
                    </a-radio-button>
                </a-radio-group>-->

                <ul style="padding-left:0" @click="groupChange">
                  <li>
                    <input
                      class="radio"
                      id="a"
                      type="radio"
                      name="radios"
                      value="a"
                      v-model="radio"
                    />
                    <label for="a" style="cursor:pointer">全部小组</label>
                  </li>
                  <li v-for="item in groupList" :key="item.groupId">
                    <input
                      class="radio"
                      :id="item.groupId"
                      type="radio"
                      name="radios"
                      :value="item.groupId"
                      v-model="radio"
                    />
                    <label :for="item.groupId" style="cursor:pointer">{{ item.groupName }}</label>
                  </li>
                </ul>
              </div>
            </div>
            <div class="rightTab">
              <a-form style="margin-left:20px" @submit="handleSubmit" :form="form" class="form">
                <a-row class="form-row" :gutter="16">
                  <a-col :lg="3" :md="8" :sm="24">
                    <a-form-item>
                      <a-select defaultValue="在职" @change="stateChange">
                        <a-select-option value="1">在职</a-select-option>
                        <a-select-option value="2">离职</a-select-option>
                      </a-select>
                    </a-form-item>
                  </a-col>
                  <a-col :lg="3" :md="8" :sm="24">
                    <a-form-item>
                      <a-select defaultValue="选择员工" @change="userChange">
                        <a-select-option
                          v-for="item in userList"
                          :key="item.userId"
                          :value="item.userId"
                        >{{ item.user }}</a-select-option>
                      </a-select>
                    </a-form-item>
                  </a-col>
                  <a-col :lg="3" :md="8" :sm="24">
                    <a-form-item>
                      <a-select defaultValue="通过商品" @change="goodsChange">
                        <a-select-option value="0">通过商品</a-select-option>
                        <a-select-option value="1">被挖商品</a-select-option>
                      </a-select>
                    </a-form-item>
                  </a-col>
                  <a-col :lg="2" :md="8" :sm="24">
                    <a-form-item>
                      <a-button htmlType="submit" type="primary">查找商品</a-button>
                    </a-form-item>
                  </a-col>
                </a-row>
              </a-form>
              <div class="scrollBox">
                <a-table
                  style="margin-left:20px;margin-bottom:60px;margin-right:10px"
                  :columns="columns"
                  :rowKey="goodsList => goodsList.jdg_id"
                  :dataSource="goodsList"
                  :loading="loading"
                  :pagination="pagination"
                  @change="handleTableChange"
                >
                  <div slot="detailInfo" slot-scope="row">
                    <div class="ant-list-item-meta">
                      <div class="ant-list-item-meta-avatar">
                        <span class="ant-avatar ant-avatar-lg ant-avatar-square ant-avatar-image">
                          <img :src="'https://img14.360buyimg.com/n1/'+row.jdg_image_url" />
                        </span>
                      </div>
                      <div class="ant-list-item-meta-content">
                        <div class="ant-list-item-meta-description">
                          <a target="_blank" :href="'//item.jd.com/'+row.jdg_sku_id+'.html'">
                            <span class="detail-name">{{ row.jdg_sku_name }}</span>
                          </a>
                          <span style="color:#000">￥{{ row.jdg_price }}</span>
                          <span style="margin-left:20px">{{ row.jdg_shop_name }}</span>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div slot="time" slot-scope="row">
                    {{ row.jdg_start_time }}
                    <br />
                    {{ row.jdg_end_time }}
                  </div>
                  <div slot="coupon" slot-scope="row">
                    <div v-if="row.jdg_send_num">
                      ￥{{ row.jdg_coupon_amount }}
                      <br />
                      发量/总量：{{ row.jdg_now_count }}/{{ row.jdg_send_num }}
                      <br />
                      期限：{{ row.jdg_coupon_start_date }}-{{ row.jdg_coupon_end_date }}
                    </div>
                  </div>
                  <span slot="commissionRate" slot-scope="row">{{ row.jdg_commission_rate }}%</span>
                  <span slot="serviceRate" slot-scope="row">{{ row.jdg_service_rate }}%</span>
                </a-table>
              </div>
            </div>
          </div>
        </a-card>
      </a-col>
    </a-row>
  </a-col>
</template>

<script>
import { getAdmingroupList, getCrewList } from '@/api/admin/user'
// import { getGroupList } from '@/api/group'
import { getPassgoods } from '@/api/detail'
const columns = [
  {
    title: '姓名',
    width: 150,
    dataIndex: 'user',
    scopedSlots: {
      customRender: 'user'
    }
  },
  {
    title: '商品信息',
    width: 500,
    scopedSlots: {
      customRender: 'detailInfo'
    }
  },
  {
    title: '优惠券',
    scopedSlots: {
      customRender: 'coupon'
    }
  },
  {
    title: '参与时间',
    scopedSlots: {
      customRender: 'time'
    }
  },
  {
    title: '佣金比例',
    scopedSlots: {
      customRender: 'commissionRate'
    }
  },
  {
    title: '服务费比例',
    scopedSlots: {
      customRender: 'serviceRate'
    }
  }
]
export default {
  name: 'PassGoods',
  data () {
    return {
      radio: 'a',
      description: '显示你所有通过的商品列表.',
      value: 1,
      // form
      form: this.$form.createForm(this),
      columns,
      pagination: {
        pageSize: 15,
        page: 1
      },
      loading: false,
      skeLoading: true,
      userList: [],
      groupList: [],
      goodsList: [],
      values: {},
      idd: '',
      rank: 1,
      groupId: '',
      goodstype: 0,
      groupde: 0,
      memberId: ''
    }
  },
  created () {
    if (this.$route.query.id) {
      this.idd = this.$route.query.id
    }
    // console.log(this.$route.query.id)
    if (this.idd !== undefined) {
      this.radio = this.idd
    }
    this.groupId = this.idd
    this.getAdmingroupList()
    this.getPassgoods(this.idd, this.goodstype, this.pagination.pageSize, this.pagination.page)
    this.getCrewList(this.idd, this.rank)
  },
  mounted () {},
  methods: {
    groupChange (e) {
      // console.log(e.target.nodeName)
      this.userList = []
      if (e.target.nodeName.toLowerCase() === 'input') {
        this.groupId = e.target.id
        // console.log('e.target', this.groupId)
        if (e.target.id === 'a') {
          this.getPassgoods('', this.goodstype, this.pagination.pageSize, this.pagination.page, undefined)
        } else {
          this.getPassgoods(this.groupId, this.goodstype, this.pagination.pageSize, this.pagination.page, undefined)
        }
        this.getCrewList(this.groupId, this.rank)
      }
    },
    stateChange (value) {
      // console.log(`状态 ${value}`)
      this.rank = value
      this.userList = []
      this.getCrewList(this.groupId, this.rank)
    },
    userChange (value) {
      // console.log(`员工 ${value}`)
      this.memberId = value
    },
    goodsChange (value) {
      // console.log(`商品 ${value}`)
      this.goodstype = value
    },
    getAdmingroupList () {
      getAdmingroupList({})
        .then(res => {
          this.skeLoading = false
          this.groupList = res.result
          // console.log('小组列表', this.groupList)
          if (this.idd !== '') {
            // console.log('idd', this.idd)
            var ac = this.groupList.filter(e => e.groupId === this.idd)
            // console.log('ac', ac[0])
            this.groupde = ac[0].groupName
            // console.log('this.groupde', this.groupde)
          }
        })
        .catch(err => {
          this.skeLoading = false
          // this.loading = false
          console.log(err)
        })
    },
    getPassgoods (id, val, pageSize, page, memberId) {
      this.loading = true
      getPassgoods({
        groupId: id === '' ? undefined : id,
        type: val,
        pageSize: pageSize,
        page: page,
        memberId: memberId
      })
        .then(res => {
          // console.log('商品列表', res.result)
          this.goodsList = res.result.data
          const pagination = {
            ...this.pagination
          }
          pagination.total = res.result.total
          pagination.pageSize = res.result.per_page
          pagination.page = res.result.current_page
          this.pagination = pagination
          this.loading = false
        })
        .catch(err => {
          this.loading = false
          console.log(err)
        })
    },
    getCrewList (id, rank) {
      this.userList = []
      getCrewList({
        groupId: id === 'a' ? undefined : id,
        rank: rank
      })
        .then(res => {
          this.userList = []
          // console.log('组员列表', res.result)
          this.userList = res.result
        })
        .catch(err => {
          // this.loading = false
          console.log(err)
        })
    },
    handleSubmit (e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          // values.type = this.goodstype
          // values.groupId = this.groupId
          // values.memberId = this.memberId
          // values.page = 1
          // values.pageSize = 15
          // console.log(values)
          // this.values = values
          this.getPassgoods(this.groupId, this.goodstype, this.pagination.pageSize, this.pagination.page, this.memberId)
        }
      })
    },

    handleTableChange (pagination, filters, sorter) {
      // console.log('pagination', pagination)
      // console.log('filters', filters)
      // console.log('sorter', sorter)
      const param = this.values
      param.pageSize = pagination.pageSize
      param.page = pagination.current
      //   const pager = { ...this.pagination }
      //   pager.current = pagination.current
      //   this.pagination = pager
      //   console.log('this.values', this.values)
      this.getPassgoods(this.groupId, this.goodstype, this.values.pageSize, this.values.page)
    }
  }
}
</script>
<style lang="less" scoped>
ul li {
  list-style: none;
}

.passgoods {
  .groupbox {
    // height: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;

    .scrollBox {
      overflow-y: auto;
      height: 100%;
      width: calc(100% + 20px);
    }

    .leftgroup {
      width: 10%;
      height: 800px;
      overflow: hidden;
      background-color: #fff;
      border-right: 1px solid rgb(209, 208, 208);

      input {
        display: none;
      }

      label {
        display: inline-block;
        width: 80%;
        border: none;
        height: 50px;
        line-height: 50px;
        text-align: center;
        border-radius: 5px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }

      input:checked + label {
        background-color: rgb(42, 86, 206);
        color: white;
      }
    }
  }
  .rightTab {
    width: 90%;
    height: 800px;
    overflow: hidden;
  }
}

.detail-name {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 16px;
  margin-bottom: 5px;
}

@media screen and (max-width: 1200px) {
  .passgoods {
    .groupbox {
      width: 100%;
      display: block;
      .leftgroup {
        width: 100%;
        height: 100%;
        border-right: none;

        ul {
          height: 100%;
          display: flex;
          justify-content: flex-start;
          align-items: center;

          li {
            width: 80px;
            height: 40px;
            label {
              width: 80px;
              height: 40px;
              line-height: 40px;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
            }
          }
        }
      }

      .rightTab {
        width: 90%;
      }
    }
  }
}
</style>>
